<template>
  <view class="login">
    <view class="login-title">
      <view class="login-title-hello"> 您好， </view>
      <view class="login-title-where"> 欢迎来到医修智汇院端 </view>
    </view>
    <!-- 客户端 -->
    <view class="login-user">
      <view class="login-user-hospital">
        <!-- 输入框 -->
        <input
          placeholder="请搜索您所在医院的名称"
          v-model="hospitalName"
          @input="seachHospital"
          placeholder-style="font-size:28rpx;line-height:34rpx;color:#B6BDBD"
          type="text"
        />
        <!-- 根据后端接口返回的 列表 -->
        <view class="login-user-hospital-hospitalList" v-if="hospitalList.length > 0">
          <view
            class="login-user-hospital-hospitalList-child"
            v-for="item in hospitalList"
            @tap="choiceHospital(item.name, item.id)"
            :key="item.id"
          >
            {{ item.name }}
          </view>
        </view>
      </view>
      <view class="login-xieyi">
        <label
          @tap="select"
          style="display: flex; align-items: center; justify-content: center"
        >
          <checkbox :checked="isSelect" style="zoom: 60%" />
          <text> 我已经阅读并同意 </text>
        </label>
        <text class="login-xieyi-color" @click.stop="handleView('service')">
          服务协议
        </text>
        及
        <text class="login-xieyi-color" @click.stop="handleView('privacy')">
          隐私协议
        </text>
      </view>
    </view>
    <view
      style="
        position: absolute;
        font-size: 22rpx;
        color: #646466;
        bottom: 50rpx;
        text-align: center;
        width: 100%;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
      "
    >
      <view class="">
        登录代表同意
        <text class="login-xieyi-color" @click.stop="handleView('service')"
          >服务协议
        </text>
        及
        <text class="login-xieyi-color" @click.stop="handleView('privacy')">
          隐私协议
        </text>
      </view>
      <view class=""> 登录前请阅读 </view>
    </view>
    <button class="login-btn" :disabled="btn" type="default" @tap="login">登录</button>
  </view>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      hospitalList: [], //搜索的医院的列表
      hospitalName: "", //医院名称
      isSelect: false, //协议勾选
      hospitalId: null, //选择的医院id
    };
  },
  computed: {
    btn() {
      if (this.isSelect) {
        return false;
      } else {
        return true;
      }
    },
  },
  watch: {},
  onShow() {
    wx.hideHomeButton();
    this.login();
  },
  methods: {
    /* 缓存 */
    ...mapMutations(["setStorage"]),
    /* 勾选协议 */
    select() {
      this.isSelect = !this.isSelect;
    },
    // 查看协议
    handleView(val) {
      uni.navigateTo({
        url: `/pages/protocol/protocol?type=${val}`,
      });
    },
    /* 选择医院 */
    choiceHospital(n, i) {
      this.hospitalId = i;
      this.hospitalName = n;
      this.hospitalList = [];
    },
    /* 获取医院列表 */
    seachHospital(e) {
      this.$https
        .post("/hospital/search", {
          name: this.hospitalName,
        })
        .then((res) => {
          this.hospitalList = res.data;
        });
    },
    /* 登录 */
    login() {
			if (!this.hospitalId) {
				uni.showToast({
					title: "请选择医院",
					icon: "none",
				});
				return;
			}
      uni.getUserProfile({
        desc: "获取个人信息",
        success: (res) => {
          uni.login({
            provider: "weixin",
            success: (res1) => {
              const { code } = res1;
              const { avatarUrl, nickName } = res.userInfo;
              this.$https
                .post("/user/wxLogin", {
                  hospital_id: this.hospitalId, //医院id
                  avatar: avatarUrl,
                  nickname: nickName,
                  code: code,
                })
                .then((res3) => {
                  uni.showToast({
                    title: res3.msg,
                    icon: "none",
                  });
                  if (res3.code == 1) {
                    this.setStorage(res3.data); //存到vuex
                    setTimeout(() => {
                      uni.switchTab({
                        url: "/pages/index/index",
                      });
                    }, 1500);
                  }
                });
            },
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;

  &-title {
    width: 100%;
    margin: 48rpx 0 0 64rpx;
    color: #303030;

    &-hello {
      font-weight: 500;
      font-size: 64rpx;
    }

    &-where {
      line-height: 68rpx;
      font-size: 32rpx;
    }
  }

  &-user {
    padding: 0 64rpx;
    color: #979797;

    &-hospital {
      margin-top: 80rpx;
      position: relative;

      input {
        border-bottom: 2rpx solid #edeef2;
        padding-bottom: 28rpx;
      }

      &-hospitalList {
        position: absolute;
        top: 50rpx;
        width: 100%;
        z-index: 99;
        box-sizing: border-box;
        background-color: #ffffff;
        border: 2rpx solid #22ba82;
        border-radius: 10rpx;
        padding: 0 20rpx;

        &-child {
          line-height: 70rpx;
        }
      }
    }

    &-rules {
      font-size: 24rpx;
      margin: 30rpx 0 60rpx;

      &-href {
        color: $public-oclor;
        border-bottom: 2rpx solid $public-oclor;
      }
    }
  }

  &-admin {
    margin: 0rpx 64rpx;

    input {
      border-bottom: 2rpx solid #edeef2;
      margin-top: 66rpx;
    }
  }

  &-btn {
    margin: 0 64rpx;
    height: 96rpx;
    border-radius: 48rpx;
    font-size: 32rpx;
    line-height: 96rpx;
    color: #fff;
    background-color: #1a66ff;
    margin-top: 70rpx;
  }

  &-btn::after {
    border: none;
  }

  &-xieyi {
    margin-top: 30rpx;
    display: flex;
    color: #646466;
    font-size: 22rpx;
    line-height: 40rpx;

    &-color {
      color: $public-oclor;
    }
  }
}
</style>
